<template>
	<view style="padding-bottom: 120rpx;">
		<u-navbar
			v-if="!$isWeixin()"
			:customBack="backToHome"
			:title="title"
			:titleWidth="450"
			:titleBold="true"
			:background="{ backgroundColor: '#ffffff' }"
			:is-fixed="true"
		></u-navbar>

		<u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

		<view class="" v-show="tabIndex == 0">
			<u-cell-item title="申请文件" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
			<u-cell-item :arrow="false" style="padding: 10rpx;"><image-upload v-model="applyPhoto"></image-upload></u-cell-item>
			<u-cell-item :arrow="false" title="收货地址">
				<city-select :value="areaCode" @city-change="onCityChange"></city-select>
				<u-input inputAlign="right" v-model="form.Delivery_Address" placeholder="详细地址"></u-input>
			</u-cell-item>
			<u-cell-item :arrow="false">
				<view class="u-font-9 u-text-left">*务必详细确保能收到快递（不必在详细地址栏填写省、市、区，只需填写街道名称，门牌号码，楼层和房间号等信息）</view>
			</u-cell-item>

			<u-cell-item :arrow="false" title="申请备注"><u-input type="textarea" inputAlign="right" placeholder="备注" :value="state.ApplicationRemake"></u-input></u-cell-item>
			
			<block v-if="showReview">
				<u-gap height="40" bg-color="#f5f5f5"></u-gap>
				<review-form ref="reviewForm"></review-form>
			</block>
	
		</view>

		<view class="" v-if="tabIndex == 1"><relations :list="state.Dealer_RelationList"></relations></view>

		<view class="" v-if="tabIndex == 2">
			<basic-information
				v-if="state.ShowLevel == 1"
				:metadata="state.DataBaseInfo"
				:showOtherInfo="false"
				:showReview="false"
				:showGrade="false"
				:showParent="false"
				:loadCity="loadCity"
				:data="{
					Dealer_BaseInfo: state.First_Dealer_BaseInfo
				}"
			></basic-information>

			<block v-if="state.ShowLevel == 2">
				<u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name" :border-bottom="false"></u-cell-item>
				<basic-information
					:metadata="state.DataBaseInfo"
					:showOtherInfo="false"
					:showReview="false"
					:showGrade="false"
					:showParent="false"
					:loadCity="loadCity"
					:data="{
						Dealer_BaseInfo: state.Double_Dealer_BaseInfo
					}"
				></basic-information>
			</block>

			<block v-if="state.ShowLevel == 3">
				<u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name"></u-cell-item>
				<u-cell-item title="二级经销商名称" :arrow="false" :value="state.Double_Dealer_BaseInfo.Name" :border-bottom="false"></u-cell-item>
				<store-information :loadCity="loadCity" :data="state.Door_Dealer_BaseInfo"></store-information>
			</block>
		</view>

		<view style="" v-if="tabIndex == 3">
			<u-button class="u-m-l-30 u-m-t-10" @tap="addModuleClick(1)" type="warning" size="mini">添加申请</u-button>
			<u-gap :height="20"></u-gap>
			<module-apply
				@edit="() => onEdit(item, 1)"
				@delete="() => onDelete(index)"
				:selectType="1"
				v-for="(item, index) in form.ModuleList"
				:key="index"
				:value="item"
				:index="index"
			></module-apply>
		</view>

		<view style="" v-if="tabIndex == 4">
			<u-button class="u-m-l-30 u-m-t-10" @tap="addModuleClick(2)" type="warning" size="mini">添加申请</u-button>
			<u-gap :height="20"></u-gap>
			<module-apply
				@edit="() => onEdit(item, 2)"
				@delete="() => onDelete(index)"
				:selectType="2"
				v-for="(item, index) in form.ShellPrototypeList"
				:key="index"
				:value="item"
				:index="index"
			></module-apply>
		</view>

		<view style="" v-if="tabIndex == 5">
			<u-button class="u-m-l-30 u-m-t-10" @tap="addModuleClick(3)" type="warning" size="mini">添加申请</u-button>
			<u-gap :height="20"></u-gap>
			<module-apply
				@edit="() => onEdit(item, 3)"
				@delete="() => onDelete(index)"
				:selectType="3"
				v-for="(item, index) in form.EntityPrototypeList"
				:key="index"
				:value="item"
				:index="index"
			></module-apply>
		</view>

		<view class="btn-group-fixed"><u-button v-if="showReview" type="warning" @tap="submit">提交审核</u-button></view>
		<u-toast ref="uToast" />

		<u-popup mode="bottom" height="80%" :border-radius="24" v-model="showApplyModal" :mask-close-able="true" cancel-text="取消" :showLoading="false" :async-close="true">
			<view class="" style="padding-bottom: 120rpx;">
				<view class="u-font-28 u-text-center" style="margin: 20rpx 0;font-weight: bold;">模块样机申请</view>
				<module-apply-form ref="moduleApplyForm" :loadForm="loadForm" :selectType="selectType"></module-apply-form>
				<view class="btn-group-fixed u-flex">
					<u-button size="medium" @tap="showApplyModal = false">取消</u-button>
					<u-button type="warning" @tap="addModule" size="medium">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '模块及样机审核',

			tabList: [{ name: '上传申请文件' }, { name: '销售业务关系' }, { name: '基本信息' }, { name: '模块申请' }, { name: '空壳样机申请' }, { name: '实体样机申请' }],
			tabIndex: 0,

			DealerId: 10195,
			selectType: 1,
			ModultPrototypeAuditId: 10207,

			moduleList: [],
			shellPrototypeList: [],
			entityPrototypeList: [],

			showApplyModal: false,
			loadForm: false,
			loadCity: false,

			areaCode: [],

			showReview: false,

			state: {
				ShowLevel: null,
				First_Dealer_BaseInfo: {},
				Double_Dealer_BaseInfo: {},
				Door_Dealer_BaseInfo: {},
				DoorPhotoList: [],
				Dealer_RelationList: [],
				DataBaseInfo: {}
			},

			applyPhoto: [],

			form: {
				ModultPrototypeAuditId: '',
				DealerId: 10195,
				Delivery_ProvinceId: null,
				Delivery_CityId: null,
				Delivery_DistrictId: null,
				Delivery_Address: '',
				ApplyForPhoto: '',
				Remake: '',
				ModuleList: [],
				ShellPrototypeList: [],
				EntityPrototypeList: [],
				OutdoorSuitsList: [],
				MedalsList: [],
				State: '',
				AuditRemark: ''
			}
		};
	},

	onLoad(options) {
		if (options.DealerId) {
			this.DealerId = options.DealerId;
			this.form.DealerId = options.DealerId;
		}
		if (options.Id) {
			this.form.ModultPrototypeAuditId = options.Id;
		}

		this.init();

		this.$setTitle(this.title);
	},

	methods: {
		backToHome() {
			uni.navigateBack();
		},

		onCityChange(e) {
			if (e.province) {
				this.form.Delivery_ProvinceId = e.province.value;
			}
			if (e.city) {
				this.form.Delivery_CityId = e.city.value;
			}
			if (e.area) {
				this.form.Delivery_DistrictId = e.area.value;
			}
		},

		submit() {
			this.form.ApplyForPhoto = this.applyPhoto.map(item => item.Value).join(',');

			this.form.State = this.$refs.reviewForm.form.State;
			this.form.AuditRemark = this.$refs.reviewForm.form.AuditRemark;

			console.log(this.form);

			if (!this.form.State) {
				this.$u.toast('请选择审核状态');
				return false;
			}

			this.$u.api.approvalModule(this.form).then(res => {
				const { ResultCode, ResultMessage } = res;
				if (ResultCode === 1) {
					this.$refs.uToast.show({
						title: ResultMessage,
						back: true
					});
				}
			});
		},

		addModuleClick(selectType) {
			this.loadForm = false;
			this.selectType = selectType;
			this.showApplyModal = true;
		},

		onEdit(item, selectType) {
			this.loadForm = true;
			this.showApplyModal = true;
			this.selectType = selectType;

			this.$nextTick(() => {
				this.$refs.moduleApplyForm.initForm(Object.assign({}, item));
			});
		},

		onDelete(index) {
			let me = this;
			uni.showModal({
				title: '是否确定删除?',
				confirmText: '删除',
				success(e) {
					if (e.confirm) {
						if (me.selectType == 1) {
							me.form.ModuleList.splice(index, 1);
						}
						if (me.selectType == 2) {
							me.form.ShellPrototypeList.splice(index, 2);
						}
						if (me.selectType == 3) {
							me.form.EntityPrototypeList.splice(index, 3);
						}
					}
				}
			});
		},

		addModule() {
			const moduleApplyForm = this.$refs.moduleApplyForm.form;
			moduleApplyForm.Product.AmountSubtotal = this.$refs.moduleApplyForm.subtotal;

			const productList = [moduleApplyForm.Product];

			moduleApplyForm.ProductList = productList;

			if (!this.loadForm) {
				if (this.selectType == 1) {
					this.form.ModuleList.push({
						uuid: this.$u.guid(),
						GroupId: null,
						editable: true,
						ApplyList: [moduleApplyForm]
					});
				}

				if (this.selectType == 2) {
					this.form.ShellPrototypeList.push({
						uuid: this.$u.guid(),
						GroupId: null,
						editable: true,
						ApplyList: [moduleApplyForm]
					});
				}

				if (this.selectType == 3) {
					this.form.EntityPrototypeList.push({
						uuid: this.$u.guid(),
						GroupId: null,
						editable: true,
						ApplyList: [moduleApplyForm]
					});
				}
			} else {
				const currentUUID = this.$refs.moduleApplyForm.uuid;

				let current;
				if (this.selectType == 1) {
					current = this.form.ModuleList.find(item => item.uuid == currentUUID);
				}
				if (this.selectType == 2) {
					current = this.form.ShellPrototypeList.find(item => item.uuid == currentUUID);
				}
				if (this.selectType == 3) {
					current = this.form.EntityPrototypeList.find(item => item.uuid == currentUUID);
				}

				current &&
					current.ApplyList.forEach(apply => {
						apply.Remark = moduleApplyForm.Remark;
						apply.BrandId = moduleApplyForm.BrandId;
						apply.ProductBaseList = moduleApplyForm.ProductBaseList;
						apply.ProductList.forEach(product => {
							product = Object.assign(product, moduleApplyForm.Product);
						});
					});
			}

			this.showApplyModal = false;
		},

		init() {
			this.$u.api
				.getModuleDetail({
					DealerId: this.form.DealerId,
					SelectType: this.selectType,
					ModultPrototypeAuditId: this.form.ModultPrototypeAuditId
				})
				.then(res => {
					console.log(res);
					const { ResultCode, ResultData } = res;
					if (ResultCode === 1) {
						if (this.vuex_user.ManagerId == res.NextManagerId) {
							this.showReview = true;
						}

						this.state = ResultData;

						const { ModuleDetail, ShellPrototypeDetail, EntityPrototypeDetail, ApplyForPhoto } = ResultData;

						if (ModuleDetail) {
							ModuleDetail.forEach(item => (item.editable = true));
							this.form.ModuleList = ModuleDetail;
						}
						if (ShellPrototypeDetail) {
							ShellPrototypeDetail.forEach(item => (item.editable = true));
							this.form.ShellPrototypeList = ShellPrototypeDetail;
						}
						if (EntityPrototypeDetail) {
							EntityPrototypeDetail.forEach(item => (item.editable = true));
							this.form.EntityPrototypeList = EntityPrototypeDetail;
						}

						if (ApplyForPhoto) {
							this.applyPhoto = ApplyForPhoto.split(',').map(item => {
								return {
									Value: item
								};
							});
						}

						if (this.state.ShowLevel == 1) {
							this.form.Delivery_ProvinceId = this.state.First_Dealer_BaseInfo.Delivery_ProvinceId;
							this.form.Delivery_CityId = this.state.First_Dealer_BaseInfo.Delivery_CityId;
							this.form.Delivery_DistrictId = this.state.First_Dealer_BaseInfo.Delivery_DistrictId;
							this.form.Delivery_Address = this.state.First_Dealer_BaseInfo.Delivery_Address;
							this.areaCode = [
								this.state.First_Dealer_BaseInfo.Delivery_ProvinceId,
								this.state.First_Dealer_BaseInfo.Delivery_CityId,
								this.state.First_Dealer_BaseInfo.Delivery_DistrictId
							];
						}
						if (this.state.ShowLevel == 2) {
							this.form.Delivery_ProvinceId = this.state.Double_Dealer_BaseInfo.Delivery_ProvinceId;
							this.form.Delivery_CityId = this.state.Double_Dealer_BaseInfo.Delivery_CityId;
							this.form.Delivery_DistrictId = this.state.Double_Dealer_BaseInfo.Delivery_DistrictId;
							this.form.Delivery_Address = this.state.Double_Dealer_BaseInfo.Delivery_Address;
							this.areaCode = [
								this.state.Double_Dealer_BaseInfo.Delivery_ProvinceId,
								this.state.Double_Dealer_BaseInfo.Delivery_CityId,
								this.state.Double_Dealer_BaseInfo.Delivery_DistrictId
							];
						}
						if (this.state.ShowLevel == 3) {
							this.form.Delivery_ProvinceId = this.state.Door_Dealer_BaseInfo.Delivery_ProvinceId;
							this.form.Delivery_CityId = this.state.Door_Dealer_BaseInfo.Delivery_CityId;
							this.form.Delivery_DistrictId = this.state.Door_Dealer_BaseInfo.Delivery_DistrictId;
							this.form.Delivery_Address = this.state.Door_Dealer_BaseInfo.Delivery_Address;
							this.areaCode = [
								this.state.Door_Dealer_BaseInfo.Delivery_ProvinceId,
								this.state.Door_Dealer_BaseInfo.Delivery_CityId,
								this.state.Door_Dealer_BaseInfo.Delivery_DistrictId
							];
						}

						this.loadCity = true;
					}
				});
		}
	}
};
</script>

<style>
/* 	page {
		background-color: #eaecef;
	} */
</style>
<style lang="scss"></style>
